// app/Carousel.js
import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: viewportWidth } = Dimensions.get('window');

const carouselItems = [
    {
        title: 'Item 1',
        image: 'https://via.placeholder.com/300/FF0000/FFFFFF?text=Item+1',
    },
    {
        title: 'Item 2',
        image: 'https://via.placeholder.com/300/00FF00/FFFFFF?text=Item+2',
    },
    {
        title: 'Item 3',
        image: 'https://via.placeholder.com/300/0000FF/FFFFFF?text=Item+3',
    },
];

const CarouselComponent = () => {
    const renderItem = ({ item }) => {
        return (
            <View style={styles.slide}>
                <Image source={{ uri: item.image }} style={styles.image} />
                <Text style={styles.title}>{item.title}</Text>
            </View>
        );
    };

    return (
        <Carousel
            data={carouselItems}
            renderItem={renderItem}
            sliderWidth={viewportWidth}
            itemWidth={viewportWidth}
            layout={'default'}
        />
    );
};

const styles = StyleSheet.create({
    slide: {
        backgroundColor: '#fff',
        borderRadius: 8,
        height: 250,
        padding: 20,
        marginLeft: 10,
        marginRight: 10,
        alignItems: 'center',
    },
    image: {
        width: '100%',
        height: '70%',
        borderRadius: 8,
    },
    title: {
        marginTop: 10,
        fontSize: 18,
        fontWeight: 'bold',
    },
});

export default CarouselComponent;